<!-- 色系 -->
<template>
  <view>
    <hx-navbar ref="hxnb" :config="config" @clickBtn="clickBtn">
      <view slot="bottom">
        <template>
          <view class="input-product">
            <u--input
              customStyle="height:100%;width: 90%;margin: auto;"
              placeholderStyle="color: #fff;"
              placeholder="搜索"
              border="none"
              color="#fff"
              shape="circle"
              v-model="search"
              @confirm="searchChange"
            >
              <clIcon
                slot="prefix"
                type="icon-sousuo_o"
                color="#fff"
                size="25"
              ></clIcon>
            </u--input>
          </view>
        </template>
      </view>
    </hx-navbar>
    <view class="u-page m-t-140">
      <view class="color-list">
      	<view class="color-item" @click="go(item)" v-for="item in list" :key="item.value">
      		{{item.label}}
      	</view>
      </view>
    </view>
	<!-- 添加色系 -->
	<u-popup :show="show" :round="10" mode="center" :closeOnClickOverlay="false">
		<view class="popup-view">
			<view class="title">
				新增色系
			</view>
			<view class="form-view m-b-40">
				<view class="form-item">
					<u--input
					    border="surround"
					    v-model="label"
					  ></u--input>
				</view>
			</view>
			<view class="bot-view flex flex-sa">
				<view class="btn" @click="onCencal">
					取消
				</view>
				<view class="btn" @click="onSave">
					保存
				</view>
			</view>
		</view>
	</u-popup>
  </view>
</template>

<script>
import clIcon from "@/components/cl-icon/cl-icon.vue";
import {
  listOptions,
  addOrUpdateList
} from "@/apis/inventory/color";
export default {
  components: {
    clIcon,
  },
  data() {
    return {
      search: null,
      indexList: [],
      config: {
        title: "色系",
        color: "#ffffff",
        //背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
        backgroundColor: [1, ["#409EFF", "#409EFF", "#60b4f6", "#60b4f6"]],
        rightButton: [
          {
            key: "btn1",
            icon: "&#xe727;",
            position: "left",
          },
        ],
      },
      // 颜色列表
	  list: [],
	  params: {
		  data: {},
		  page: {
			  current: 1,
			  size: 10
		  }
	  },
	  // 显示模态框
	  show: false,
	  label: ''
    };
  },
  computed: {},
  onLoad() {
	  console.error(this.$Route.query)
    this.initData();
  },
  methods: {
    go(val) {
		// 返回上一级并传输参数
		uni.navigateBack()
		uni.$emit('on-color-data',val)
    },
    // 获取数据
    initData() {
      // 1. 查询列表信息
	  uni.showLoading({
		  title: '加载中'
	  })
      listOptions(this.params).then((res) => {
        console.log("res", res);
		if(!res.flag) return;
		this.list = res.data;
		uni.hideLoading()
      }).catch(err=>{
		  uni.hideLoading()
	  });
    },
    scrolltolower() {},
    getName(name) {
      return "bei";
    },
    searchChange() {
      this.indexList = [];
      this.pages.current = 1;
      this.initData();
    },
    clickBtn(item) {
      // console.log("index", item);
      if (item.key === "btn1") {
        // this.$Router.push({
        //   name: "informationWarehouseWarehouseDetails",
        // });
		this.show = true
      }
    },
	onCencal() {
		this.label = '';
		this.show = false
	},
	onSave() {
		if(!this.label) {
			uni.showToast({
				title: '请输入内容',
				icon: 'none'
			})
			return
		}
		
		addOrUpdateList([{'label':this.label}]).then(res=>{
			this.show = false
			this.initData()
		})
	},
  },
};
</script>

<style lang="scss" scoped>
.input-product {
  width: 95%;
  padding: 0 20upx;
  margin: 30upx auto;
  border: 1px solid #fff;
  border-radius: 50upx;
  height: 70upx;
  line-height: 70upx;
  color: #fff;
  display: flex;
}
.color-list {
	background-color: #fff;
	.color-item {
		height: 80rpx;
		font-size: 28rpx;
		padding: 0 20rpx;
		border-bottom: 1rpx solid #eee;
		line-height: 80rpx;
	}
}
</style>
